<style lang="less" scoped>
    .addressHeader{
        width: 100%;
        height: .88rem;
        display: flex;
        justify-content:space-between;
        align-items: center;
        align-content: center;
        padding: 0 0.4rem;
        .title{
            width: 70%;
            margin: 0 auto;
            font-size: 0.26rem;
            color: #333;
            text-align: center;
            font-weight: bold;
        }
        .right{
            width: .88rem;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
    }
    .addressTitle{
        width: 100%;
        padding: 0.1rem 0.26rem;
        border-bottom: 2px solid #efefef;
    }

    .vux-tab .vux-tab-item{
        background: none;
        flex: none;
        width: auto;
        margin-right: .6rem;
        max-width: 1.5rem;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        &:last-child{
            margin-right: 0;
        }
    }
    .vux-tab .vux-tab-item.vux-tab-selected{
        border-bottom: 1px solid #e94f4f;
        border-width: inherit !important;
        border-style: inherit !important;
        border-image: none !important;
    }

</style>
<style lang="less">
    .selectAddress .vux-tab{
        border-bottom: 1px solid rgba(229, 229, 229, 1);
        padding:  0 0.26rem;
    }
    .selectAddress .vux-tab-ink-bar{
        display: none !important;
    }
    .selectAddress .vux-swiper{
        height: 6rem !important;
        overflow-y: scroll!important;
        -webkit-overflow-scrolling: touch;

    }
    .selectAddress .vux-slider > .vux-swiper > .vux-swiper-item{
        padding: 0.24rem 0.26rem;
        font-size: .24rem;
        color: #333;
        .vux-center{
            padding: .26rem 0;
            &.active{
                color: #e94f4f;
            }
        }
    }
    .selectAddress .vux-slider > .vux-swiper > .vux-swiper-item .vux-center span{
        display: inline-block;
        width: .34rem;
        height: .24rem;
        margin-left: .2rem;
        background: url("../assets/img/checkMark_icon.png") no-repeat;
        background-size: 100% 100%;
        background-position: center;
    }
</style>
<template>
        <popup class="selectAddress" v-model="showAlert" @on-hide="emitClose" style="background:#fff;height: 60%;overflow-y: inherit">
            <div class="addressHeader">
                <div class="right"></div>
                <div class="title">{{title}}</div>
                <div @click = "emitClose" class="right">
                    <div class="close_icon"></div>
                </div>
            </div>
            <tab :line-width="1" v-model="tabIndex">
                <tab-item v-for="(v,i) in tabList" :selected="tabIndex == i">{{v}}</tab-item>
            </tab>
            <swiper v-model="tabIndex" height="100px" :show-dots="false">
                <swiper-item v-for="(item, index) in tabList" :key="index">
                    <div class="tab-swiper vux-center" v-if="tabIndex == 0" :class="ids[0] == v.postcode ? 'active' :''" v-for="v in provinceData" v-on:click="getCity(v,'cityData')">{{v.name}} <span v-if="ids[0] == v.postcode"></span></div>
                    <div class="tab-swiper vux-center" v-if="tabIndex == 1" :class="ids[1] == v.postcode ? 'active' :''" v-for="v in cityData" v-on:click="getCity(v,'districtData')">{{v.name}} <span v-if="ids[1] == v.postcode"></span></div>
                    <div class="tab-swiper vux-center" v-if="tabIndex == 2" :class="ids[2] == v.postcode ? 'active' :''" v-for="v in districtData" v-on:click="getCity(v,'')">{{v.name}} <span v-if="ids[2] == v.postcode"></span></div>
                </swiper-item>
            </swiper>
        </popup>
</template>
<script>
  import {TransferDom,Popup,PopupHeader,Tab,TabItem,Swiper,SwiperItem} from 'vux'

  export default {
    name: 'selectAddress',
    directives: {
      TransferDom
    },
    components: {
      Popup,
      PopupHeader,
      Tab,
      TabItem,
      Swiper,
      SwiperItem
    },
    props: {
      title: {
        type: String,
        required: true
      },
      show: Boolean,
    },
    activated(){
      this.init()
      this.getAreaConfig({parentPostcode:'1'},'provinceData')
    },
    methods: {
      init () {
        this.provinceData = []
        this.tabIndex=0,
          this.tabList=['请选择'],
          this.list2=[],
          this.provinceData=[],
          this.cityData=[],
          this.districtData=[],
          this.ids=[],
          this.names=[]
      },
      getAreaConfig(data,type){
        let that = this
        this.$ajax.address.getAreaConfig(data)
          .then((res)=>{
            that.setAddressData(res.body.content,type)
          })
      },
      setAddressData(arr,type){
        this[type] = arr
      },
      getCity(data,type){
        let that = this
        that.tabIndex ++
        if(data.postcode == this.ids[0] || data.postcode == this.ids[1]){
          return
        }
        if(type == 'cityData'){
          this.ids = []
          this.names = []
          this.tabList = [data.name,'请选择']
        }else if(type == 'districtData'){
          this.tabList = [this.tabList[0]]
          this.ids = [this.ids[0]]
          this.names = [this.names[0]]
          this.tabList[1] = data.name
          this.tabList.push('请选择');
        }else{
          this.tabList = [this.tabList[0],this.tabList[1]]
          this.names = [this.names[0],this.names[1]]
          this.ids = [this.ids[0],this.ids[1]]
          this.tabList[2] = data.name
        }
        this.ids.push(data.postcode)
        this.names.push(data.name)
        if(type){
          let arr = []
          this.getAreaConfig({parentPostcode:data.postcode},type)
        }else{
          this.tabIndex = 2
          console.log(this.ids,this.names)
          this.onShadowChange(this.ids, this.names)
          this.emitHide(true);
        }
      },
      emitHide (val) {
        this.$emit('on-hide', val)
      },
      emitClose (val) {
        this.$emit('on-close', val)
      },
      getAddressName () {
        return value2name(this.value, this.list)
      },
      onShadowChange (ids, names) {
        this.$emit('on-shadow-change', ids, names)
      }
    },
    data () {
      return {
        currentValue: this.value,
        showValue: false,
        tabIndex:0,
        tabList:['请选择'],
        list2:[],
        addressData:[],
        provinceData:[],
        cityData:[],
        districtData:[],
        ids:[],
        names:[],
        showAlert:false
      }
    },
    watch:{
      show(){
        this.showAlert = this.show
        if(!this.show){
          this.emitClose()
        }
      }
    }
  }
</script>